<template>
  <div class="home">
     <h2>
      模块一 {{ name}}
      <button @click="init"> change</button>
     </h2>
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-row>
  </div>
</template>

<script>
import {mapGetters, mapState,mapMutations,mapActions} from "vuex"

export default {
  name: 'HomeView',
  data() {
    return {
      // name:'124' 
      /* data 和computed中的数据都会挂载到 this 上 所以用vuex辅助函数组件内的名称
      不能和data中相同 */
    }
  },
  computed: {
      //mapState 映射模块里时数据 mapState("模块名称")
    ...mapState("zhang", ["name"]),
    ...mapGetters("zhang",["newName"])
  },
  methods: {
    ...mapMutations("zhang", ['CHANGE_NAME']),
    ...mapActions('zhang',['init'])
  }
}
</script>
